<template>
	<ElRow :gutter="20">
		<ElCol :span="6">
			<ElRow>
				<ElCol :span="24" v-for="(item, index) in list" :key="index">
					<div class="user-item">
						<UserColumn />
					</div>
				</ElCol>
			</ElRow>
		</ElCol>
		<ElCol :span="18">
			8
		</ElCol>
	</ElRow>
</template>

<script setup lang="ts">
import UserColumn from "./components/user-column/index.vue";
import StatusColumn from "./components/status-column/index.vue";
import ProgressColumn from "./components/progress-column/index.vue";
import OperationColumn from "./components/operation-column/index.vue";

import { useColumns } from "./hooks";

defineOptions({
	components: {
		UserColumn,
		ProgressColumn,
		StatusColumn,
		OperationColumn
	},
});

const props = defineProps({
	isLoading: {
		type: Boolean,
		default: false,
	},
	list: {
		type: Array,
		default: () => [],
	},
});

const { columns } = useColumns();
</script>

<style scoped lang="scss" src="./index.scss"></style>
